﻿<div>
    <MRow
        Class="flex"
        Justify="JustifyTypes.Center">
        <MCard
            Class="portrait"
            @oncontextmenu="Show"
            __internal_preventDefault_oncontextmenu>
            <MImage Height="300" Width="600" Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/girl.jpg"></MImage>
        </MCard>
    </MRow>

    <MMenu
        @bind-Value="showMenu"
        PositionX="X"
        PositionY="Y"
        Absolute
        OffsetY>
        <MList>
            @foreach (var item in items)
            {
                <MListItem>
                    <MListItemContent>
                        <MListItemTitle>
                            @item
                        </MListItemTitle>
                    </MListItemContent>
                </MListItem>
            }
        </MList>
    </MMenu>
</div>

<style>
.portrait.m-card {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
}
</style>

@code {

    bool showMenu = false;
    double X = 0;
    double Y = 0;

    string[] items =
    {
        "Click Me",
        "Click Me",
        "Click Me",
        "Click Me 2"
    };

    private async Task Show(MouseEventArgs args)
    {
        showMenu = false;
        await Task.Delay(16);
        
        X = args.ClientX;
        Y = args.ClientY;
        showMenu = true;
    }
}